<template>
  <div>
    <div v-if="!showScreen"
         style="position: fixed;z-index: 9999;bottom: 50px;right: 20px;height: 36px;width: 36px;display: flex;align-items: center;justify-content: center;background-image: linear-gradient(#31317E, #5656B5);border-radius: 3px;box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);">
      <img :src="toTop" @click="toTopUp"/>
    </div>
    <div class="kpi" @click="clickKPI">
      <div class="kpiOne" style="line-height: 10px;">K</div>
      <div class="kpiOne" style="line-height: 10px;">P</div>
      <div class="kpiOne" style="line-height: 6px;">I</div>
      <!--<div class="kpiOne">智</div>-->
      <!--<div class="kpiOne">能</div>-->
      <div class="kpiOne">提</div>
      <div class="kpiOne">醒</div>
    </div>
    <!--KPI提醒-->
    <div v-if="showKPI" class="positionKPI">
      <div style="padding: 20px;">
        <div style="display: flex;flex-direction: row;justify-content: space-between;">
          <div style="font-size: 20px;font-weight: 700;color: #333333;">KPI提醒</div>
          <img :src="close" @click="closeKPI"/>
        </div>
        <div style="display: flex;flex-direction: row;align-items: center;margin: 22px 0 10px;">
          <div class="titleicon"></div>
          <div class="title_right">INS提醒</div>
        </div>
        <ul style="list-style-type:disc;padding-left: 15px;font-size: 14px;color: #666666;">
          <li class="liStyle">
            <div>完成客户定义:</div>
            <div>连续月内，目标客户总计完成6个CC即转化为完成客户</div>
          </li>
          <li class="liStyle">
            <div>针剂组完成客户数量要求:</div>
            <div>自然季度内，新增大于等于5个完成客户</div>
          </li>
        </ul>
        <div style="display: flex;flex-direction: row;align-items: center;margin: 22px 0 10px;">
          <div class="titleicon"></div>
          <div class="title_right">OAD提醒</div>
        </div>
        <ul style="list-style-type:disc;padding-left: 15px;font-size: 14px;color: #666666;">
          <li class="liStyle">
            <div>完成客户定义:</div>
            <div>自然季度内，重点客户总计完成6个CC，2个MEM即转化为完成客户</div>
          </li>
          <li class="liStyle">
            <div>口服药组完成客户数量要求:</div>
            <div>自然季度内，新增大于等于8个完成客户</div>
            <div>其中需要有大于等于2个完成客户来自周边科室</div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="loading"
         style="position: fixed;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
      <Loading size="24px" vertical>数据整理中...</Loading>
    </div>
    <div style="background: rgba(69,69,146,0.06);position: relative;" v-else="loading">
      <div
          style="background-color: #fff;height: 58px;display: flex;align-items: center;z-index:9999;position:fixed;width:100%;top:0;">
        <div
            style="display:flex;font-family: PingFangSC-Medium;font-size: 20px;
                     color: #454592;letter-spacing: 0.38px;text-align: justify;line-height: 30px;margin:12px 0 12px 28px;
                     width: 160px;height: 34px;background: rgba(69,69,146,0.06);border-radius: 17.5px;margin-left: 12px;">
          <div style="width: 65%;display: flex;justify-content: center;align-items: center">{{ cal_label }}</div>
          <div style="width: 20%;display: flex;justify-content: center;align-items: center;">
            <!--<img :src="imaOr" style="width: 24px;height: 24px;"/>-->
            <div style="margin-right:5px;z-index: 6" @click="MonthReduction()"><img :src="left_icon"
                                                                                    style="width: 24px;height: 24px;padding-top: 2px;">
            </div>
            <div style="z-index: 6" @click="AddMonth()"><img :src="right_icon"
                                                             style="width: 24px;height: 24px;padding-top: 2px;">
            </div>
          </div>
        </div>
        <div
            style="position: absolute;right: 0px;font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;line-height: 16px;width: 47%;display: flex;word-break: break-all;">
          <img :src="Combined" style=" display: inline-block;vertical-align: middle;">
          <div  style=" display: inline-block;vertical-align: middle;">{{ buName }}</div>
        </div>
      </div>
      <div style="width: 100%;height: 12px;"></div>
      <van-tabs v-model="activeName" line-width="50%" color="#454592" title-active-color="#454592"
                background="none"
                title-inactive-color="#333333"
                line-height="2px"
                @change="tabChange">
        <van-tab title="按月度" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" name="a"></van-tab>
        <van-tab title="按季度" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" name="b"></van-tab>
        <!--月度季度转换-->
        <div v-if="!showScreen" style="padding: 12px 12px 12px;">
          <div class="progress">
            <div class="progress_item">
              <div class="progress_item_title">
                <div>重点客户接触点</div>
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="infodetail" style="margin-left: 5px;z-index: 6" @click="KeyPoints"/>
                  <div v-if="tip" class="demo">
                    <div class="out" @click="KeyPoints"></div>
                    <div class="in">
                      <div style="padding: 15px">
                        <div v-if="activeName=='a'">
                          <div style="margin-bottom: 15px">
                            <p><strong style=" color: #333333;">达标点：</strong>重点客户月度计划接触点总数
                            </p>
                          </div>
                          <div>
                            <p><strong style=" color: #333333;">进度条：</strong>所选月份MTD完成的重点客户接触点数量
                            </p>
                          </div>
                        </div>
                        <div v-if="activeName=='b'">
                          <div style="margin-bottom: 15px">
                            <p><strong style=" color: #333333;">达标点：</strong>重点客户季度计划接触点总数
                            </p>
                          </div>
                          <div>
                            <p><strong style=" color: #333333;">进度条：</strong>筛选月所在季度的QTD已完成的重点客户接触点数量
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <van-progress
                  stroke-width="10"
                  :pivot-text="progressList.keyCustomers.selectNum.toString()"
                  text-color="#fff"
                  :percentage="progressList.keyCustomers.percent"
                  pivot-color="rgb(146, 146, 249)"
                  color="linear-gradient(to right, #8888F2, #8888F2, #8282FA, #9292F9, #BCBCFB)"
                  track-color="rgba(255, 255, 255, 0.2)"
              />
              <div class="progress_item_num">
                <div v-if="progressList.keyCustomers.standardNum <= progressList.keyCustomers.selectNum"
                     :style="'left:' + progressList.keyCustomers.standardLeft + 'px;'"
                     style="position: absolute;left: 40px;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: rgba(216, 216, 216, 0.4);">
                      {{ progressList.keyCustomers.standardNum }}
                    </div>
                  </div>
                </div>
                <div style="position: absolute;left: 0;top: 4px;">
                  {{ progressList.keyCustomers.startNum }}
                </div>
                <!--                <div v-if="progressList.keyCustomers.standardNum > progressList.keyCustomers.selectNum"-->
                <!--                     :style="'left:' + progressList.keyCustomers.left + 'px'"-->
                <!--                     style="position: absolute;top: 4px;width: 36px;text-align: center;">-->
                <!--                  {{ progressList.keyCustomers.selectNum }}-->
                <!--                </div>-->
                <!--                <div v-if="progressList.keyCustomers.standardNum <= progressList.keyCustomers.selectNum"-->
                <!--                     style="position: absolute;right: 0;top: 4px;">-->
                <!--                  {{ progressList.keyCustomers.selectNum }}-->
                <!--                </div>-->
                <div v-if="progressList.keyCustomers.standardNum > progressList.keyCustomers.selectNum"
                     style="position: absolute;right: 0;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: #EEEEEE;">
                      {{ progressList.keyCustomers.standardNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="progress_item">
              <div class="progress_item_title">
                <div>非重点客户接触点</div>
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="infodetail" style="margin-left: 5px;z-index: 6" @click="NonFocusPoints"/>
                  <div v-if="NonFocus" class="demo">
                    <div class="out" @click="NonFocusPoints"></div>
                    <div class="in">
                      <div style="padding: 15px">
                        <div v-if="activeName=='a'">
                          <div style="margin-bottom: 15px">
                            <p><strong style=" color: #333333;">达标点：</strong>非重点客户月度计划接触点总数
                            </p>
                          </div>
                          <div>
                            <p><strong style=" color: #333333;">进度条：</strong>所选月份MTD完成的非重点客户接触点数量
                            </p>
                          </div>
                        </div>
                        <div v-if="activeName=='b'">
                          <div style="margin-bottom: 15px">
                            <p><strong style=" color: #333333;">达标点：</strong>非重点客户季度计划接触点总数
                            </p>
                          </div>
                          <div>
                            <p><strong style=" color: #333333;">进度条：</strong>筛选月所在季度的QTD已完成的非重点客户接触点数量
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <van-progress
                  stroke-width="10"
                  :pivot-text="progressList.nonKeyCustomers.selectNum.toString()"
                  text-color="#fff"
                  :percentage="progressList.nonKeyCustomers.percent"
                  pivot-color="rgb(146, 146, 249)"
                  color="linear-gradient(to right, #8888F2, #8888F2, #8282FA, #9292F9, #BCBCFB)"
                  track-color="rgba(255, 255, 255, 0.2)"
              />
              <div class="progress_item_num">
                <div v-if="progressList.nonKeyCustomers.standardNum <= progressList.nonKeyCustomers.selectNum"
                     :style="'left:' + progressList.nonKeyCustomers.standardLeft + 'px;'"
                     style="position: absolute;left: 40px;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: rgba(216, 216, 216, 0.4);">
                      {{ progressList.nonKeyCustomers.standardNum }}
                    </div>
                  </div>
                </div>
                <div style="position: absolute;left: 0;top: 4px;">
                  {{ progressList.nonKeyCustomers.startNum }}
                </div>
                <!--                <div v-if="progressList.nonKeyCustomers.standardNum > progressList.nonKeyCustomers.selectNum"-->
                <!--                     :style="'left:' + progressList.nonKeyCustomers.left + 'px'"-->
                <!--                     style="position: absolute;top: 4px;width: 36px;text-align: center;">-->
                <!--                  {{ progressList.nonKeyCustomers.selectNum }}-->
                <!--                </div>-->
                <!--                <div v-if="progressList.nonKeyCustomers.standardNum <= progressList.nonKeyCustomers.selectNum"-->
                <!--                     style="position: absolute;right: 0;top: 4px;">-->
                <!--                  {{ progressList.nonKeyCustomers.selectNum }}-->
                <!--                </div>-->
                <div v-if="progressList.nonKeyCustomers.standardNum > progressList.nonKeyCustomers.selectNum"
                     style="position: absolute;right: 0;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: #EEEEEE;">
                      {{ progressList.nonKeyCustomers.standardNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="progress_item">
              <div class="progress_item_title">
                <div>重点客户数</div>
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="infodetail" style="margin-left: 5px;z-index: 6"
                       @click="NumberCustomersPoints"/>
                  <div v-if="NumberCustomers " class="demo">
                    <div class="out" @click="NumberCustomersPoints"></div>
                    <div class="in">
                      <div style="padding: 15px">
                        <div>
                          <div style="margin-bottom: 15px">
                            <p>
                              <strong style=" color: #333333;">达标点：</strong>
                              <span v-if="productGroup=='OAD'">
                                                                要求勾选客户数量为30个
                                                            </span>
                              <span v-if="productGroup=='INS'">
                                                               要求勾选客户数量为20个
                                                            </span>
                            </p>
                          </div>
                          <div>
                            <p><strong style=" color: #333333;">进度条：</strong>实际勾选的重点客户数量</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <van-progress
                  stroke-width="10"
                  :pivot-text="progressList.customersNum.selectNum.toString()"
                  text-color="#fff"
                  :percentage="progressList.customersNum.percent"
                  pivot-color="rgb(146, 146, 249)"
                  color="linear-gradient(to right, #8888F2, #8888F2, #8282FA, #9292F9, #BCBCFB)"
                  track-color="rgba(255, 255, 255, 0.2)"
              />
              <div class="progress_item_num">
                <div v-if="progressList.customersNum.standardNum <= progressList.customersNum.selectNum"
                     :style="'left:' + progressList.customersNum.standardLeft + 'px;'"
                     style="position: absolute;left: 40px;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: rgba(216, 216, 216, 0.4);">
                      {{ progressList.customersNum.standardNum }}
                    </div>
                  </div>
                </div>
                <div style="position: absolute;left: 0;top: 4px;">
                  {{ progressList.customersNum.startNum }}
                </div>
                <!--                <div v-if="progressList.customersNum.standardNum > progressList.customersNum.selectNum"-->
                <!--                     :style="'left:' + progressList.customersNum.left + 'px'"-->
                <!--                     style="position: absolute;top: 4px;width: 36px;text-align: center;">-->
                <!--                  {{ progressList.customersNum.selectNum }}-->
                <!--                </div>-->
                <!--                <div v-if="progressList.customersNum.standardNum <= progressList.customersNum.selectNum"-->
                <!--                     style="position: absolute;right: 0;top: 4px;">-->
                <!--                  {{ progressList.customersNum.selectNum }}-->
                <!--                </div>-->
                <div v-if="progressList.customersNum.standardNum > progressList.customersNum.selectNum"
                     style="position: absolute;right: 0;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: #EEEEEE;">
                      {{ progressList.customersNum.standardNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="progress_item">
              <div class="progress_item_title">
                <div>本季度已转换完成客户</div>
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="infodetail" style="margin-left: 5px;z-index: 6"
                       @click="ConvertNetWorkPoints"/>
                  <div v-if="ConvertNetWork" class="demo">
                    <div class="out" @click="ConvertNetWorkPoints"></div>
                    <div class="in">
                      <div style="padding: 15px">
                        <div>
                          <div style="margin-bottom: 15px">
                            <p>
                              <strong style=" color: #333333;">达标点：</strong>
                              <span v-if="productGroup=='OAD'">
                                                                需转化完成客户数量要求为8个
                                                            </span>
                              <span v-if="productGroup=='INS'">
                                                                需转化完成客户数量要求为5个
                                                            </span>
                            </p>
                          </div>
                          <div>
                            <p><strong style=" color: #333333;">进度条：</strong>已转化的完成客户数量</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <van-progress
                  stroke-width="10"
                  :pivot-text="progressList.completeCustomers.selectNum.toString()"
                  text-color="#fff"
                  :percentage="progressList.completeCustomers.percent"
                  pivot-color="rgb(146, 146, 249)"
                  color="linear-gradient(to right, #8888F2, #8888F2, #8282FA, #9292F9, #BCBCFB)"
                  track-color="rgba(255, 255, 255, 0.2)"
              />
              <div class="progress_item_num">
                <div v-if="progressList.completeCustomers.standardNum <= progressList.completeCustomers.selectNum"
                     :style="'left:' + progressList.completeCustomers.standardLeft + 'px;'"
                     style="position: absolute;left: 40px;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: rgba(216, 216, 216, 0.4);">
                      {{ progressList.completeCustomers.standardNum }}
                    </div>
                  </div>
                </div>
                <div style="position: absolute;left: 0;top: 4px;">
                  {{ progressList.completeCustomers.startNum }}
                </div>
                <!--                <div v-if="progressList.completeCustomers.standardNum > progressList.completeCustomers.selectNum"-->
                <!--                     :style="'left:' + progressList.completeCustomers.left + 'px'"-->
                <!--                     style="position: absolute;top: 4px;width: 36px;text-align: center;">-->
                <!--                  {{ progressList.completeCustomers.selectNum }}-->
                <!--                </div>-->
                <!--                <div v-if="progressList.completeCustomers.standardNum <= progressList.completeCustomers.selectNum"-->
                <!--                     style="position: absolute;right: 0;top: 4px;">-->
                <!--                  {{ progressList.completeCustomers.selectNum }}-->
                <!--                </div>-->
                <div v-if="progressList.completeCustomers.standardNum > progressList.completeCustomers.selectNum"
                     style="position: absolute;right: 0;top: -40px;">
                  <div class="standardNum" style="width: 36px;">
                    <div style="font-size: 14px;color: rgba(216, 216, 216, 0.4);">达标</div>
                    <div style="width: 1px;height: 20px;background: rgba(216, 216, 216, 0.4);margin: 3px 0;"></div>
                    <div style="font-size: 16px;color: #EEEEEE;">
                      {{ progressList.completeCustomers.standardNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="!showScreen" style="width: 100%;height: 8px;background: #ffffff;"></div>
        <!--//产品-->
        <div style="padding: 12px;">
          <div class="condition">
            <div v-for="(item, index) in productList" v-bind:key="index"
                 :class="productList.length==1?'condition_all':(index==0?'condition_left':(index==productList.length-1?'condition_right':'condition_middle'))"
                 :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':''"
                 @click="selectAll(index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div
            style="position: relative;margin: 0 12px 0 12px;display: flex;flex-direction: row;justify-content: space-between;height: 45px;border-bottom: 1px solid #dddddd;">
          <div class="search">
            <img :src="Seched" @click="clickSearch"/>
            <form action="javascript:void 0" style="display: flex;">
              <input class="input" @input="inputSearch($event)" :value="searchText" type="search"
                     @keyup.13="clickSearch"
                     placeholder="搜索医生/ETMS编码"/>
              <img :src="close_icon" style="width: 20px;height:20px;" v-if="searchText" @click="searchText=''"/>
            </form>
          </div>
          <img v-if="selectScreenNum === 0 && !showScreen" :src="update" @click="clickScreen"
               style="margin-right: 20px;"/>
          <img v-if="selectScreenNum > 0 || showScreen" :src="update2" @click="clickScreen"
               style="margin-right: 20px;"/>
          <div v-if="selectScreenNum > 0 && !showScreen" style="position: absolute;top: 9px;right: 3px;">
            <div class="standardNum"
                 style="font-size: 8px;width: 12px;height: 12px;border: 1px solid #454592;border-radius: 10px;">
              {{ selectScreenNum }}
            </div>
          </div>
        </div>
        <div v-if="showScreen" style="padding: 8px 20px 88px;">
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right" style="display: flex">客户状态
              <img :src="crown" style="padding-left:10px"/>
            </div>
          </div>
          <div class="screenList">
            <div v-for="(item, index) in stateList" v-bind:key="index" @click="selectState(index)"
                 :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                 class="screen_item">
              {{ item.name }}
            </div>
          </div>
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right">重点类型</div>
          </div>
          <div class="screenList">
            <div v-for="(item, index) in typeList" v-bind:key="index" @click="selectType(index)"
                 :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                 class="screen_item">
              {{ item.name }}
            </div>
          </div>
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right">潜力</div>
          </div>
          <div class="screenList">
            <div v-for="(item, index) in potentialList" v-bind:key="index"
                 @click="selectPotential(index)"
                 :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                 class="screen_item">
              {{ item.name }}
            </div>
          </div>
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right">派别</div>
          </div>
          <div class="screenList">
            <div v-for="(item, index) in statusList" v-bind:key="index" @click="selectFaction(index)"
                 :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                 class="screen_item">
              {{ item.name }}
            </div>
          </div>
          <!--//前到纳做-->
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right">状态</div>
          </div>
          <div class="screenList" v-if="productGroup=='INS'">
            <div v-for="(item, index) in ComeorwardList" v-bind:key="index" @click="selectComeorward(index)"
                 :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                 class="screen_item">
              {{ item.name }}
            </div>
          </div>
          <div class="screenList" v-if="productGroup=='OAD'">
            <div v-for="(item, index) in ComeorwardList" v-bind:key="index" style="background-color:#C0C0C0"
                 class="screen_item">
              {{ item.name }}
            </div>
          </div>
          <!--//-->
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right">医院</div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: space-between;">
            <div class="screenList" :style="!showAllHospital?'':'height: 32px;overflow: hidden;'">
              <div v-for="(item, index) in hospitalList" v-bind:key="index"
                   @click="selectHospital(index)"
                   :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                   class="screen_item">
                {{ item.name }}
              </div>
            </div>
            <div v-if="!showAllHospital" class="standardNum" style="height: 24px;margin: 0 5px;">
              <img :src="item_down" style="transform: rotate(270deg);"
                   @click="clickAllHospital"/>
            </div>
            <div v-else class="standardNum" style="height: 24px;margin: 0 5px;">
              <img :src="item_down" style="transform: rotate(90deg);"
                   @click="clickAllHospital"/>
            </div>
          </div>
          <div class="title_top">
            <div class="titleicon"></div>
            <div class="title_right">科室</div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: space-between;">
            <div class="screenList" :style="!showAllDepartment?'':'height: 32px;overflow: hidden;'">
              <div v-for="(item, index) in specialtyList" v-bind:key="index"
                   @click="selectDepartment(index)"
                   :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                   class="screen_item">
                {{ item.name }}
              </div>
            </div>
            <div v-if="!showAllDepartment" class="standardNum" style="height: 24px;margin: 0 5px;">
              <img :src="item_down" style="transform: rotate(270deg);"
                   @click="clickAllDepartment"/>
            </div>
            <div v-else class="standardNum" style="height: 24px;margin: 0 5px;">
              <img :src="item_down" style="transform: rotate(90deg);"
                   @click="clickAllDepartment"/>
            </div>
          </div>
        </div>
        <div v-if="showScreen" style="position: fixed;z-index: 9999;bottom: 0;width: 100%;">
          <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 20px;">
            <div class="button" @click="resetScreen"
                 :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">重置
            </div>
            <div class="button" @click="screenResult"
                 :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;'">查看
            </div>
          </div>
        </div>
        <div v-if="!showScreen" style="display: flex;flex-direction: column;padding: 21px 12px 42px 12px;">
          <div style="display: flex;flex-direction: row;align-items: center;margin-bottom: 12px;color: #333333;">
            <div class="item_name">
              <div style="width: 45px;text-align: center;">姓名</div>
            </div>
            <div style="display: flex;flex: 5;flex-direction: row;align-items: center;">
              <div class="items">SC</div>
              <div class="items">EC</div>
              <div class="items">CC</div>
              <div class="items" style="color: #454592;" v-if="productKey=='全部'">TC
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="info" style="margin-left: 2px;" @click="TCPoints"/>
                  <div v-if="tc" class="demo1">
                    <div class="out1" @click="TCPoints"></div>
                    <div class="in1">
                      <div style="padding: 6px">
                        <div style="margin-bottom: 15px">
                          <p class="pStyle">TC指Total Call,是对所有提交的拜访报告的计数</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="items" style="color: #A1A1A1;">MEM</div>
            </div>
          </div>
          <div class="list_item" v-for="(item, index) in infoList" v-bind:key="index">
            <div class="item_top" :style="item.select?'border-radius: 5px 5px 0 0;':''">
              <div v-if="item.isShowCrown" style="position: absolute;left: 0;">
                <div style="display: flex;justify-content: center;align-items: center;width: 20px;">
                  <img :src="crown"/>
                </div>
              </div>
              <div class="item_name">
                <div style="width: 45px;text-align: center;">{{ item.name }}</div>
                <img v-if="!item.select" :src="item_down" style="transform: rotate(90deg);"
                     @click="clickDown(index)"/>
                <img v-if="item.select" :src="item_down" style="transform: rotate(-90deg);"
                     @click="clickDown(index)"/>
              </div>
              <!--重点类型-->
              <div style="display: flex;flex: 5;flex-direction: row;align-items: center;"
                   v-if="FocusNotFocus==true">
                <div class="items">{{ item.sc }}
                  <!--<span v-if="productKey=='全部'">-->
                  <!--/{{ item.scPlan }}-->
                  <!--</span>-->
                </div>
                <div class="items">{{ item.ec }}
                  <!--<span v-if="productKey=='全部'">-->
                  <!--/{{ item.ecPlan }}-->
                  <!--</span>-->
                </div>
                <div class="items">{{ item.cc }}
                  <!--<span v-if="productKey=='全部'">-->
                  <!--/{{ item.ccPlan }}-->
                  <!--</span>-->
                </div>
                <div class="items" v-if="productKey=='全部'">
                  <div class="items" v-if="activeName=='a'">
                    <div class="items"
                         v-if="item.tcplan==4 || item.tcplan==2 || item.tcplan==1 ||item.tcplan==0">
                      <div v-if="item.tcplan==4 && (item.tc==3 || item.tc==4 || item.tc==5 )">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else-if="item.tcplan==2 && item.tc==2">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else-if="item.tcplan==1 && item.tc==1">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else-if="item.tcplan==0 && item.tc==0">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else>
                        <div class="items" style="color: #D1242D" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div class="items" style="color: #D1242D" v-if="productKey=='全部'">
                        {{ item.tc }}/{{ item.tcplan }}
                      </div>
                    </div>
                  </div>
                  <div class="items" v-if="activeName=='b'">
                    <div class="items" v-if="productKey=='全部'">
                      {{ item.tc }}/{{ item.tcplan }}
                    </div>
                  </div>
                </div>
                <div class="items" style="color: #A1A1A1;">{{ item.mem }}</div>
              </div>
              <!--非重点-->
              <div style="display: flex;flex: 5;flex-direction: row;align-items: center;" v-if="FocusNotFocus==false">
                <div class="items">{{ item.sc }}</div>
                <div class="items">{{ item.ec }}</div>
                <div class="items">{{ item.cc }}</div>
                <div class="items" v-if="productKey=='全部'">
                  <div class="items" v-if="activeName=='a'">
                    <div class="items"
                         v-if="item.tcplan==4 || item.tcplan==2 || item.tcplan==1 ||item.tcplan==0">
                      <div v-if="item.tcplan==4 && (item.tc==3 || item.tc==4 || item.tc==5 )">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else-if="item.tcplan==2 && item.tc==2">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else-if="item.tcplan==1 && item.tc==1">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else-if="item.tcplan==0 && item.tc==0">
                        <div class="items" style="color: #00A590" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                      <div v-else>
                        <div class="items" style="color: #D1242D" v-if="productKey=='全部'">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div class="items" style="color: #D1242D" v-if="productKey=='全部'">
                        {{ item.tc }}/{{ item.tcplan }}
                      </div>
                    </div>
                  </div>
                  <div class="items" v-if="activeName=='b'">
                    <div class="items" v-if="productKey=='全部'">
                      {{ item.tc }}/{{ item.tcplan }}
                    </div>
                  </div>
                </div>
                <div class="items" style="color: #A1A1A1;">{{ item.mem }}</div>
              </div>
            </div>
            <div class="item_bottom" v-if="item.select">
              {{ item.hospital }}/ {{ item.Department }} / {{ item.potential }} / {{ item.faction }}
              {{ productGroup == 'INS' ? `/${item.pathway}` : "" }}
            </div>
          </div>
          <div
              style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;font-size: 12px;color: #454592;">
            <div class="item_name">
              <div style="width: 45px;text-align: center;">总数</div>
            </div>
            <div style="display: flex;flex: 5;flex-direction: row;align-items: center;"
                 v-if="FocusNotFocus==true">
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.SC }}
                <!--<span v-if="productKey=='全部'">-->
                <!--/{{ total.SCPlan }}-->
                <!--</span>-->
              </div>
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.EC }}
                <!--<span v-if="productKey=='全部'">-->
                <!--/{{ total.ECPlan }}-->
                <!--</span>-->
              </div>
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.CC }}
                <!--<span v-if="productKey=='全部'">-->
                <!--/{{ total.CCPlan }}-->
                <!--</span>-->
              </div>
              <div class="items" style="font-size: 12px;color: #454592;" v-if="productKey=='全部'">
                {{ total.TC }} /{{ total.TCPlan }}
                <!--<span v-if="productKey=='全部'">-->
                <!--/{{total.TCPlan}}-->
                <!--</span>-->
              </div>
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.MEM }}</div>
            </div>
            <div style="display: flex;flex: 5;flex-direction: row;align-items: center;"
                 v-if="FocusNotFocus==false">
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.SC }}</div>
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.EC }}</div>
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.CC }}</div>
              <div class="items" style="font-size: 12px;color: #454592;" v-if="productKey=='全部'">
                {{ total.TC }}/{{ total.TCPlan }}
                <!--<span v-if="productKey=='全部'">-->
                <!--/{{total.TCPlan}}-->
                <!--</span>-->
              </div>
              <div class="items" style="font-size: 12px;color: #454592;">{{ total.MEM }}</div>
            </div>
          </div>
        </div>
      </van-tabs>
    </div>
  </div>

</template>
<script>

import Vue from 'vue';
import {Circle, Loading, Overlay, Progress, Tab, Tabs} from 'vant';
import left_icon from '@assets/icon/chevron_left.svg'
import right_icon from '@assets/icon/chevron_right.svg'
import Combined from '@assets/icon/Combined.svg'
import dayjs from 'dayjs'
import down_cc from '@assets/icon/34.svg'
import up_cc from '@assets/icon/up.svg'
import close_icon from '@assets/icon/close.svg'
import {
  getDictionary,
  getFilterData,
  getManageDashborad,
  getProgreessOfManageData,
  getToken,
  getDictionaryDm
} from '@api/tm'
import warning from '@assets/icon/warning.svg'
import right from '@assets/icon/right.svg'
import Calendar from '@components/snfDashboardCalendar'
import Seched from '@assets/icon/20.svg'
import update from '@assets/icon/21.svg'
import update2 from '@assets/icon/22.svg'
import item_down from '@assets/icon/item_down.svg'
import close from '@assets/icon/close.svg'
import toTop from '@assets/icon/toTop.svg'
import crown from '@assets/icon/crown.svg'
import infodetail from '@assets/icon/16detail.svg'
// Vue.use(infiniteScroll)
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Circle)
Vue.use(Progress)
Vue.use(update)
Vue.use(item_down)
Vue.use(close)

export default {
  name: "CU",
  components: {
    Tab,
    Tabs,
    Calendar,
    Loading,
    Overlay,
    Seched,
    update,
    update2
  },
  data() {
    return {
      close_icon:close_icon,
      cal_label: "",
      buName: "",
      token: [],
      FocusNotFocus: null,
      productGroup: null,
      ConvertNetWork: false,
      NumberCustomers: false,
      NonFocus: false,
      tc: false,
      tip: false,
      tokenString: "",
      showKPI: false,
      showScreen: false,
      update: update,
      update2: update2,
      Seched: Seched,
      // fullCalendarShow: false,
      loading: false,
      left_icon: left_icon,
      right_icon: right_icon,
      Combined: Combined,
      dayList: [],
      down_cc: down_cc,
      up_cc: up_cc,
      imaOr: up_cc,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeName: 'a',
      info: infodetail,
      infodetail: infodetail,
      right: right,
      warning: warning,
      item_down: item_down,
      close: close,
      toTop: toTop,
      crown: crown,
      day: '',
      //产品
      productList: [],
      searchText: '', // 搜索内容
      clientWidth: document.documentElement.clientWidth, // 页面宽度
      progressList: {
        keyCustomers: {
          startNum: 0,
          standardNum: 0,
          selectNum: 0,
          percent: 0,
          left: 0,
          standardLeft: 0
        },
        nonKeyCustomers: {
          startNum: 0,
          standardNum: 0,
          selectNum: 0,
          percent: 0,
          left: 0,
          standardLeft: 0
        },
        customersNum: {
          startNum: 0,
          standardNum: 0,
          selectNum: 0,
          percent: 0,
          left: 0,
          standardLeft: 0
        },
        completeCustomers: {
          startNum: 0,
          standardNum: 0,
          selectNum: 0,
          percent: 0,
          left: 0,
          standardLeft: 0
        },
      },
      stateList: [
        {code: 1, name: '完成', select: false, selection: true},
        {code: 0, name: '非完成', select: false, selection: true},
      ],
      typeList: [
        {name: '重点', select: true, selection: false},
        {name: '非重点', select: false, selection: true},
      ],
      potentialList: [],
      statusList: [],
      ComeorwardList: [],
      hospitalList: [],
      specialtyList: [],
      showAllHospital: true,
      showAllDepartment: true,
      selectScreenNum: 1,
      productKey: '全部',
      infoList: [], // 信息列表
      total: {
        SC: 0,
        EC: 0,
        CC: 0,
        TC: 0,
        MEM: 0,
        SCPlan: 0,
        ECPlan: 0,
        CCPlan: 0,
        TCPlan: 0,
      },//总数
      FilterSelection: [],
      territoryCd: "",
      UserType: ""
    };
  },
  created() {
  },
  methods: {
    // 置顶
    toTopUp() {
      scrollTo(0, 0)
    },
    // 点击KPI
    clickKPI() {
      this.showKPI = true;
      this.tip = false;
      this.NonFocus = false;
      this.NumberCustomers = false;
      this.ConvertNetWork = false;
      this.tc = false;
    },
    // 关闭KPI
    closeKPI() {
      this.showKPI = false
    },
    // 选择产品
    selectAll(index) {
      let productCode = "";
      this.productList.forEach((item, idx) => {
        item.select = index == idx
        if (index == idx) {
          item.select = true;
          productCode = item.code;
        }
      })
      if (index == 0) {
        this.productKey = "全部";
      } else {
        this.productKey = "";
      }
      let time = dayjs(this.day).format("YYYYMM")
      if (this.activeName == "a") {
        //月度
        this.getManageData(this.tokenString, time, "", "");
      } else {
        //季度
        let m = dayjs(time).month()
        let y = dayjs(time).year()
        let q = ''
        if (m < 3) {
          q = "Q1"
        } else if (m < 6) {
          q = "Q2"
        } else if (m < 9) {
          q = "Q3"
        } else {
          q = "Q4"
        }
        time = y + q;
        this.getManageData(this.tokenString, "", time, "");
      }
    },
    // 点击筛选
    clickScreen() {
      scrollTo(0, 0)
      this.showScreen = true
    },
    // 选择客户状态
    selectState(index) {
      this.stateList[index].select = !this.stateList[index].select
      if (this.stateList[index].select === true) {
        this.stateList[index].selection = true
      } else {
        this.stateList[index].selection = false
      }
    },
    // 选择重点类型
    selectType(index) {
      this.typeList.forEach((item, idx) => {
        if (index == idx) {
          item.select = true
          item.selection = true
        } else {
          item.select = false
          item.selection = false
        }
      })
    },
    // 选择潜力
    selectPotential(index) {
      this.potentialList[index].select = !this.potentialList[index].select
      if (this.potentialList[index].select === true) {
        this.potentialList[index].selection = true
      } else {
        this.potentialList[index].selection = false
      }
    },
    // 选择派别
    selectFaction(index) {
      this.statusList[index].select = !this.statusList[index].select
      if (this.statusList[index].select === true) {
        this.statusList[index].selection = true
      } else {
        this.statusList[index].selection = false
      }
    },
    // 选择前到纳做
    selectComeorward(index) {
      this.ComeorwardList[index].select = !this.ComeorwardList[index].select
      if (this.ComeorwardList[index].select === true) {
        this.ComeorwardList[index].selection = true
      } else {
        this.ComeorwardList[index].selection = false
      }
    },
    // 选择医院
    selectHospital(index) {
      this.hospitalList[index].select = !this.hospitalList[index].select
      if (this.hospitalList[index].select === true) {
        this.hospitalList[index].selection = true
      } else {
        this.hospitalList[index].selection = false
      }
    },
    // 选择科室
    selectDepartment(index) {
      this.specialtyList[index].select = !this.specialtyList[index].select
      if (this.specialtyList[index].select === true) {
        this.specialtyList[index].selection = true
      } else {
        this.specialtyList[index].selection = false
      }
    },
    // 显示全部医院
    clickAllHospital() {
      this.showAllHospital = !this.showAllHospital
    },
    // 显示全部科室
    clickAllDepartment() {
      this.showAllDepartment = !this.showAllDepartment
    },
    // // 清除筛选
    // clearScreen() {
    //   //客户状态
    //   for (let i = 0; i < this.stateList.length; i++) {
    //     if (this.stateList[i].selection === true) {
    //       this.stateList[i].select = false
    //     } else {
    //       this.stateList[i].select = true
    //     }
    //   }
    //   for (let i = 0; i < this.ComeorwardList.length; i++) {
    //     if (this.ComeorwardList[i].selection === true) {
    //       this.ComeorwardList[i].select = false
    //     } else {
    //       this.ComeorwardList[i].select = true
    //     }
    //   }
    //   for (let i = 0; i < this.typeList.length; i++) {
    //     {
    //       if (this.typeList[i].selection === true) {
    //         this.typeList[i].select = false
    //       } else
    //         this.typeList[i].select = true
    //     }
    //   }
    //   for (let i = 0; i < this.potentialList.length; i++) {
    //     if (this.potentialList[i].selection === true) {
    //       this.potentialList[i].select = false
    //     } else {
    //       this.potentialList[i].select = true
    //     }
    //   }
    //   for (let i = 0; i < this.statusList.length; i++) {
    //     if (this.statusList[i].selection === true) {
    //       this.statusList[i].select = false
    //     } else {
    //       this.statusList[i].select = true
    //     }
    //   }
    //   for (let i = 0; i < this.hospitalList.length; i++) {
    //     if (this.hospitalList[i].selection === true) {
    //       this.hospitalList[i].select = false
    //     } else {
    //       this.hospitalList[i].select = true
    //     }
    //   }
    //   for (let i = 0; i < this.specialtyList.length; i++) {
    //     if (this.specialtyList[i].selection === true) {
    //       this.specialtyList[i].select = false
    //     } else {
    //       this.specialtyList[i].select = true
    //     }
    //   }
    //   this.showScreen = false
    //   this.showAllHospital = false
    //   this.showAllDepartment = false
    // },
    // 重置筛选
    resetScreen() {
      this.stateList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.ComeorwardList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.typeList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.typeList[0].select = true
      this.typeList[0].selection = true
      this.potentialList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.statusList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.hospitalList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.specialtyList.forEach(item => {
        item.select = false
        item.selection = false
      })
      this.showScreen = false
      this.showAllHospital = false
      this.showAllDepartment = false
      this.screenResult()
    },
    // 查看筛选结果
    screenResult() {
      this.selectScreenNum = 0;
      //客户状态
      for (let i = 0; i < this.stateList.length; i++) {
        if (this.stateList[i].select === true) {
          this.stateList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.stateList[i].selection = true;
        }
      }
      for (let i = 0; i < this.ComeorwardList.length; i++) {
        if (this.ComeorwardList[i].select === true) {
          this.ComeorwardList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.ComeorwardList[i].selection = true;
        }
      }
      for (let i = 0; i < this.typeList.length; i++) {
        if (this.typeList[i].select === true) {
          this.typeList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.typeList[i].selection = true;
        }
      }
      for (let i = 0; i < this.potentialList.length; i++) {
        if (this.potentialList[i].select === true) {
          this.potentialList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.potentialList[i].selection = true;
        }
      }
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].select === true) {
          this.statusList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.statusList[i].selection = true;
        }
      }
      for (let i = 0; i < this.hospitalList.length; i++) {
        if (this.hospitalList[i].select === true) {
          this.hospitalList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.hospitalList[i].selection = true;
        }
      }
      for (let i = 0; i < this.specialtyList.length; i++) {
        if (this.specialtyList[i].select === true) {
          this.specialtyList[i].selection = false;
          this.selectScreenNum = this.selectScreenNum + 1
        } else {
          this.specialtyList[i].selection = true;
        }
      }
      this.showScreen = false
      //数据
      let time = dayjs(this.day).format("YYYYMM");
      if (this.activeName == "a") {
        //月度
        this.getManageData(this.tokenString, time, "", "");
      } else {
        //季度
        let m = dayjs(time).month()
        let y = dayjs(time).year()
        let q = ''
        if (m < 3) {
          q = "Q1"
        } else if (m < 6) {
          q = "Q2"
        } else if (m < 9) {
          q = "Q3"
        } else {
          q = "Q4"
        }
        time = y + q;
        this.getManageData(this.tokenString, "", time, "");
      }
    },
    // 输入搜索条件
    inputSearch(e) {
      this.searchText = e.currentTarget.value
    },
    // 点击下拉按钮
    clickDown(index) {
      this.infoList[index].select = !this.infoList[index].select
    },
    //日期减一个月
    MonthReduction() {
      this.day = dayjs(this.day).subtract(1, 'month').format("YYYY/MM/DD")
      let time = dayjs(this.day).format("YYYYMM")
      if (this.activeName == "a") {
        //产品  筛选   进度条
        this.PackagingMethod(time, this.tokenString, this.token, "", "a");
        //月度
        this.getManageData(this.tokenString, time, "", "");
      } else {
        //季度
        let m = dayjs(time).month()
        let y = dayjs(time).year()
        let q = ''
        if (m < 3) {
          q = "Q1"
        } else if (m < 6) {
          q = "Q2"
        } else if (m < 9) {
          q = "Q3"
        } else {
          q = "Q4"
        }
        time = y + q;
        //产品  筛选   进度条
        this.PackagingMethod(time, this.tokenString, this.token, "", "b");
        this.getManageData(this.tokenString, "", time, "");
      }
    },
    //日期加一个月
    AddMonth() {
      this.day = dayjs(this.day).add(1, 'month').format("YYYY/MM/DD")
      let time = dayjs(this.day).format("YYYYMM");
      if (this.activeName == "a") {
        //产品  筛选   进度条
        this.PackagingMethod(time, this.tokenString, this.token, "", "a");
        //月度
        this.getManageData(this.tokenString, time, "", "");
      } else {
        //季度
        let m = dayjs(time).month()
        let y = dayjs(time).year()
        let q = ''
        if (m < 3) {
          q = "Q1"
        } else if (m < 6) {
          q = "Q2"
        } else if (m < 9) {
          q = "Q3"
        } else {
          q = "Q4"
        }
        time = y + q;
        //产品  筛选   进度条
        this.PackagingMethod(time, this.tokenString, this.token, "", "b");
        this.getManageData(this.tokenString, "", time, "");
      }
    },
    //重点 显示提示
    KeyPoints() {
      this.tip = !this.tip;
    },
    //非重点显示提示
    NonFocusPoints() {
      this.NonFocus = !this.NonFocus;
    },
    //重点客户数
    NumberCustomersPoints() {
      this.NumberCustomers = !this.NumberCustomers;
    },
    //转换完成
    ConvertNetWorkPoints() {
      this.ConvertNetWork = !this.ConvertNetWork
    },
    TCPoints() {
      this.tc = !this.tc;
    },
    tabChange(name, title) {
      this.activeName = name
      let time = this.day;
      if (name == "a") {
        //月度
        time = dayjs(time).format("YYYYMM")
        this.getManage(this.tokenString, time, "");
        //list
        this.getManageData(this.tokenString, time, "", "");
      } else {
        //季度
        let m = dayjs(time).month()
        let y = dayjs(time).year()

        let q = ''
        if (m < 3) {
          q = "Q1"
        } else if (m < 6) {
          q = "Q2"
        } else if (m < 9) {
          q = "Q3"
        } else {
          q = "Q4"
        }
        time = y + q;
        this.getManage(this.tokenString, "", time);
        //list
        this.getManageData(this.tokenString, "", time, "");
      }
    },
    //获取产品
    GetProduct(time, tokenString, token) {
      this.productList = [];
      if (this.UserType == "DM") {
        let param1 = {
          tokenString: this.tokenString,
          monthId: time,
          employeeCode: this.$route.query.territoryCd,
          filterType: "product",
          dmTerritoryCd: this.territoryCd
        }
        getDictionaryDm(param1).then(res => {
          let AllNum = {
            name: '全部',
            monthId: "",
            code: "",
            select: true
          }
          this.productList.push(AllNum);
          if (res.errorCode == "0") {
            res.product.forEach(item => {
              this.productList.push({
                name: item.name,
                code: item.code,
                select: false
              });
            })
          }
        })
      } else {
        let param = {
          tokenString: this.tokenString,
          monthId: time,
          employeeCode: this.$route.query.territoryCd,
          filterType: "product"
        }
        //获取pt产品
        getDictionary(param).then(res => {
          let AllNum = {
            name: '全部',
            monthId: "",
            code: "",
            select: true
          }
          this.productList.push(AllNum);
          if (res.errorCode == "0") {
            res.product.forEach(item => {
              this.productList.push({
                name: item.name,
                code: item.code,
                select: false
              });
            })
          }
        })
      }

    },
    //获取筛选
    GetScreen(time, tokenString, token, product) {
      this.hospitalList = [];
      this.specialtyList = [];
      this.potentialList = [];
      this.statusList = [];
      this.ComeorwardList = [];
      let param1 = {
        tokenString: this.tokenString,
        monthId: time,
        employeeCode: this.$route.query.territoryCd,
        filterType: "all",
        product: product
      }
      getFilterData(param1).then(res => {
        //医院
        res.data.hostptial.forEach(item => {
          this.hospitalList.push({
            name: item.name,
            code: item.code,
            select: false,
            selection: true
          });
        })
        //科室
        res.data.specialty.forEach(item => {
          this.specialtyList.push({
            name: item.name,
            code: item.code,
            select: false,
            selection: true
          });
        })
        //潜力
        res.data.potential.forEach(item => {
          this.potentialList.push({
            name: item.name,
            code: item.code,
            select: false,
            selection: true
          });
        })
        //派别
        res.data.status.forEach(item => {
          this.statusList.push({
            name: item.name,
            code: item.code,
            select: false,
            selection: true
          });
        })
        //前到纳做
        res.data.segStatus.forEach(item => {
          this.ComeorwardList.push({
            name: item.name,
            code: item.code,
            select: false,
            selection: true
          });
        })
      })
    },
    //获取进度条
    getManage(tokenString, time, Qtime) {
      let param = {
        tokenString: this.tokenString,
        monthId: time,
        quarterId: Qtime,
        territoryCd: this.territoryCd
      }
      getManageDashborad(param).then(res => {
        //代表email
        this.buName=res.data.email
        //非重点
        this.progressList.nonKeyCustomers.selectNum = res.data.actNormalTouch;
        this.progressList.nonKeyCustomers.standardNum = res.data.normalTouch;
        //重点接触点
        this.progressList.keyCustomers.selectNum = res.data.actPreTouch;
        this.progressList.keyCustomers.standardNum = res.data.preTouch;
        //重点客户数
        this.progressList.customersNum.selectNum = res.data.actPreNum;
        this.progressList.customersNum.standardNum = res.data.preNum;
        //本季度客户转化数达标
        this.progressList.completeCustomers.selectNum = res.data.actSuccessNum;
        this.progressList.completeCustomers.standardNum = res.data.successNum;
        // 重点客户接触点
        if (this.progressList.keyCustomers.standardNum > this.progressList.keyCustomers.selectNum) {
          this.progressList.keyCustomers.percent = (this.progressList.keyCustomers.selectNum / this.progressList.keyCustomers.standardNum).toFixed(4) * 100
          this.progressList.keyCustomers.left = parseInt(this.clientWidth - 64 - 26) * parseInt(this.progressList.keyCustomers.percent) / 100
          if (this.progressList.keyCustomers.left < 15) {
            this.progressList.keyCustomers.left = 15
          } else if ((this.clientWidth - 64) - this.progressList.keyCustomers.left < 45) {
            this.progressList.keyCustomers.left = (this.clientWidth - 64) - 45
          }
        } else {
          this.progressList.keyCustomers.percent = 100
          if (!this.progressList.keyCustomers.selectNum || !this.progressList.keyCustomers.standardNum) {
            this.progressList.keyCustomers.standardLeft = 5
          } else {
            this.progressList.keyCustomers.standardLeft = parseInt(this.clientWidth - 64 - 26) * (this.progressList.keyCustomers.standardNum / this.progressList.keyCustomers.selectNum).toFixed(4)
          }
        }
        // 非重点客户接触点
        if (this.progressList.nonKeyCustomers.standardNum > this.progressList.nonKeyCustomers.selectNum) {
          this.progressList.nonKeyCustomers.percent = (this.progressList.nonKeyCustomers.selectNum / this.progressList.nonKeyCustomers.standardNum).toFixed(4) * 100
          this.progressList.nonKeyCustomers.left = parseInt(this.clientWidth - 64 - 26) * this.progressList.nonKeyCustomers.percent / 100
          if (this.progressList.nonKeyCustomers.left < 15) {
            this.progressList.nonKeyCustomers.left = 15
          } else if ((this.clientWidth - 64) - this.progressList.nonKeyCustomers.left < 45) {
            this.progressList.nonKeyCustomers.left = (this.clientWidth - 64) - 45
          }
        } else {
          this.progressList.nonKeyCustomers.percent = 100
          if (!this.progressList.nonKeyCustomers.selectNum || !this.progressList.nonKeyCustomers.standardNum) {
            this.progressList.nonKeyCustomers.standardLeft = 5
          } else {
            this.progressList.nonKeyCustomers.standardLeft = parseInt(this.clientWidth - 64 - 26) * (this.progressList.nonKeyCustomers.standardNum / this.progressList.nonKeyCustomers.selectNum).toFixed(4)
          }
        }
        //重点客户数
        if (this.progressList.customersNum.standardNum > this.progressList.customersNum.selectNum) {
          this.progressList.customersNum.percent = (this.progressList.customersNum.selectNum / this.progressList.customersNum.standardNum).toFixed(4) * 100
          this.progressList.customersNum.left = parseInt(this.clientWidth - 64 - 26) * this.progressList.customersNum.percent / 100
          if (this.progressList.customersNum.left < 15) {
            this.progressList.customersNum.left = 15
          } else if ((this.clientWidth - 64) - this.progressList.customersNum.left < 45) {
            this.progressList.customersNum.left = (this.clientWidth - 64) - 45
          }
        } else {
          this.progressList.customersNum.percent = 100
          if (!this.progressList.customersNum.selectNum || !this.progressList.customersNum.standardNum) {
            this.progressList.customersNum.standardLeft = 5
          } else {
            this.progressList.customersNum.standardLeft = parseInt(this.clientWidth - 64 - 26) * (this.progressList.customersNum.standardNum / this.progressList.customersNum.selectNum).toFixed(4)
          }
        }
        //转换完成
        if (this.progressList.completeCustomers.standardNum > this.progressList.completeCustomers.selectNum) {
          this.progressList.completeCustomers.percent = (this.progressList.completeCustomers.selectNum / this.progressList.completeCustomers.standardNum).toFixed(4) * 100
          this.progressList.completeCustomers.left = parseInt(this.clientWidth - 64 - 26) * this.progressList.completeCustomers.percent / 100
          if (this.progressList.completeCustomers.left < 15) {
            this.progressList.completeCustomers.left = 15
          } else if ((this.clientWidth - 64) - this.progressList.completeCustomers.left < 45) {
            this.progressList.completeCustomers.left = (this.clientWidth - 64) - 45
          }
        } else {
          this.progressList.completeCustomers.percent = 100
          if (!this.progressList.completeCustomers.selectNum || !this.progressList.completeCustomers.standardNum) {
            this.progressList.completeCustomers.standardLeft = 5
          } else {
            this.progressList.completeCustomers.standardLeft = parseInt(this.clientWidth - 64 - 26) * (this.progressList.completeCustomers.standardNum / this.progressList.completeCustomers.selectNum).toFixed(4)
          }
        }
      })
    },
    //获取list 数据
    getManageData(tokenString, time, quarterId, isFocus) {
      this.infoList = [];
      this.total = {
        SC: 0,
        EC: 0,
        CC: 0,
        TC: 0,
        MEM: 0,
        SCPlan: 0,
        ECPlan: 0,
        CCPlan: 0,
        TCPlan: 0,
      };
      //产品
      let productCode = "";
      this.productList.forEach(item => {
        if (item.select == true) {
          productCode = item.code;
        }
      })
      //状态
      let isSuccess = "";
      let status_select_list = []
      this.stateList.forEach(item => {
        if (item.select == true) {
          status_select_list.push(item.code)
        }
      })
      isSuccess = status_select_list.join(",")
      //重点非重点
      this.typeList.forEach(item => {
        if (item.select == true) {
          if (item.name == "重点") {
            isFocus = 1;
            this.FocusNotFocus = true;
          } else if (item.name == "非重点") {
            isFocus = 0;
            this.FocusNotFocus = false;
          }
        }
      })
      //潜力
      let potentialCode = "";
      let potential_select_list = []
      this.potentialList.forEach(item => {
        if (item.select == true) {
          potential_select_list.push(item.code)
        }
      })
      potentialCode = potential_select_list.join(',')
      //状态
      let newStatus = "";
      let newStatus_select_list = []
      this.ComeorwardList.forEach(item => {
        if (item.select == true) {
          newStatus_select_list.push(item.code);
        }
      })
      newStatus = newStatus_select_list.join(',')
      //医院
      let hospitalCode = "";
      let hospital_select_list = []
      this.hospitalList.forEach(item => {
        if (item.select == true) {
          hospital_select_list.push(item.code);
        }
      })
      hospitalCode = hospital_select_list.join(',')
      //科室
      let insDepartNM = "";
      let insDepartNM_select_list = []
      this.specialtyList.forEach(item => {
        if (item.select == true) {
          insDepartNM_select_list.push(item.code);
        }
      })
      insDepartNM = insDepartNM_select_list.join(',')
      //派别
      let FactionsCd = ""
      let FactionsCd_select_list = []
      this.statusList.forEach(item => {
        if (item.select == true) {
          FactionsCd_select_list.push(item.code);
        }
      })
      FactionsCd = FactionsCd_select_list.join(',')
      let param = {
        territoryCd: this.territoryCd,
        tokenString: this.tokenString,
        monthId: time,
        quarterId: quarterId,
        productCode: productCode,
        isSuccess: isSuccess,
        isFocus: isFocus,
        potentialCode: potentialCode,
        newStatus: newStatus,
        hospitalCode: hospitalCode,
        insDepartNM: insDepartNM,
        hospitalName: this.searchText,
        FactionsCd: FactionsCd
      }
      getProgreessOfManageData(param).then(res => {
        if (res.errorCode == "0") {
          res.data.forEach(item => {
            if (item.SC == "") {
              item.SC = 0
            }
            if (item.EC == "") {
              item.EC = 0
            }
            if (item.CC == "") {
              item.CC = 0
            }
            if (item.TC == "") {
              item.TC = 0
            }
            if (item.MEM == "") {
              item.MEM = 0
            }
            if (item.targetSC == "") {
              item.targetSC = 0
            }
            if (item.targetCC == "") {
              item.targetCC = 0
            }
            if (item.targetEC == "") {
              item.targetEC = 0
            }
            if (item.targetTC == "") {
              item.targetTC = 0
            }
            this.total.SC = parseInt(item.SC) + parseInt(this.total.SC);
            this.total.SCPlan = parseInt(item.targetSC) + parseInt(this.total.SCPlan);
            this.total.EC = parseInt(item.EC) + parseInt(this.total.EC);
            this.total.ECPlan = parseInt(item.targetEC) + parseInt(this.total.ECPlan);
            this.total.CC = parseInt(item.CC) + parseInt(this.total.CC);
            this.total.CCPlan = parseInt(item.targetCC) + parseInt(this.total.CCPlan);
            this.total.TC = parseInt(item.TC) + parseInt(this.total.TC);
            this.total.TCPlan = parseInt(item.targetTC) + parseInt(this.total.TCPlan);
            this.total.MEM = parseInt(item.MEM) + parseInt(this.total.MEM);
            this.infoList.push({
              cc: item.CC ? parseInt(item.CC) : 0,
              ec: item.EC,
              mem: item.MEM,
              sc: item.SC,
              tc: item.TC,
              tcplan: item.targetTC,
              name: item.customerName,
              faction: item.factions,
              hospital: item.institutionName,
              pathway: item.newStatus,
              potential: item.potentialNm,
              Department: item.specialty,
              ccPlan: item.targetCC ? parseInt(item.targetCC) : 0,
              ecPlan: item.targetEC,
              scPlan: item.targetSC,
              isShowCrown: item.isSuccess == "1" ? true : false,
              select: false
            });
          })
        }
      })
    },
    //封装方法
    PackagingMethod(time, tokenString, token, product, timeMouTh) {
      //获取产品
      this.GetProduct(time, tokenString, token);
      //获取筛选
      this.GetScreen(time, tokenString, token, product);
      //获取进度条
      if (timeMouTh == "a") {
        this.getManage(tokenString, time, "");
      } else {
        this.getManage(tokenString, "", time);
      }


    },
    clickSearch() {
      let time = this.day;
      if (this.activeName == "a") {
        //月度
        time = dayjs(time).format("YYYYMM")
        this.getManage(this.tokenString, time, "");
        //list
        this.getManageData(this.tokenString, time, "", "");
      } else {
        //季度
        let m = dayjs(time).month()
        let y = dayjs(time).year()

        let q = ''
        if (m < 3) {
          q = "Q1"
        } else if (m < 6) {
          q = "Q2"
        } else if (m < 9) {
          q = "Q3"
        } else {
          q = "Q4"
        }
        time = y + q;
        this.getManage(this.tokenString, "", time);
        //list
        this.getManageData(this.tokenString, "", time, "");
      }
    }

  },
  mounted() {
    //传过来Id
    this.territoryCd = this.$route.query.territoryCd
    //获取日期
    this.day = dayjs().format('YYYY/MM/DD')
    var time = dayjs(this.day).format('YYYYMM');
    //获取token
    getToken({email: sessionStorage.getItem("email")}).then(res => {
      this.tokenString = res.tokenString;
      this.token = res.token;

      //获取登陆人的组
      let Group = this.token.pt
      if (Group == "PT76") {
        this.productGroup = "INS"
      } else {
        this.productGroup = "OAD"
      }
      switch (res.token.userType) {
        case "DM":
          this.UserType = "DM"
          break;
        case "RM":
          this.UserType = "RM"
          break;
      }
      //获取数据
      this.PackagingMethod(time, res.tokenString, res.token, "", "a");
      setTimeout(() => {
        this.getManageData(res.tokenString, time, "", 1);
      }, 1000)
    });
  },
  watch: {
    day(newval, oldval) {
      this.cal_label = dayjs(newval).format("YYYY/MM");
    }
  }
}
</script>
<style src="./MRProgress.css" scoped></style>
